<template>
	<div class="base-amount items-center gap-1" :class="{ 'inline-flex': !hideCurrency }">
		<span :class="amountClass" v-if="!hideCurrencyAmount">
			<n-ellipsis v-bind="NBind.Ellipsis">
				<span v-if="showPrefix">{{ comp.currencySymbol }}</span>
				<span>{{ fmtBalance(comp.amount, comp.currencyTo) }}</span>
				<span v-if="!showPrefix && openFiat">&nbsp;{{ comp.currencyTo }}</span>
			</n-ellipsis>
		</span>
		<base-currency v-if="!hideCurrency" :currency="currencyTo || currency" :class="iconClass" />
	</div>
</template>

<script setup lang="ts">
import { computed, PropType } from 'vue'
import { NEllipsis } from 'naive-ui'
import BaseCurrency from '@/components/base/currency/index.vue'
import { calcAmount, fmtBalance } from '@/utils'
import { CurrencyEnum } from '@/enums'
import { NBind } from '@/plugins/naive-ui'
import { useWalletStore } from '@/store'

defineOptions({ name: 'BaseAmount' })

const props = defineProps({
	value: {
		type: [Number, String],
		default: ''
	},
	currency: {
		type: String as PropType<CurrencyEnum>,
		default: ''
	},
	currencyTo: {
		type: String as PropType<CurrencyEnum>,
		default: ''
	},
	reverseFiat: {
		type: Boolean,
		default: false
	},
	hideCurrency: {
		type: Boolean,
		default: false
	},
	hideCurrencyAmount: {
		type: Boolean,
		default: false
	},
	showSymbol: {
		type: Boolean,
		default: false
	},
	amountClass: {
		type: [String, Array, Object],
		default: ''
	},
	iconClass: {
		type: [String, Array, Object],
		default: ''
	}
})
const walletStore = useWalletStore()
const comp = computed(() =>
	calcAmount(props.value, props.currency, props.currencyTo, props.reverseFiat, props.showSymbol)
)
const openFiat = computed(() => walletStore.walletConfig.displayCryptoInFiat)
const showPrefix = computed(
	() =>
		(openFiat.value && !props.reverseFiat) ||
		(!openFiat.value && props.reverseFiat) ||
		props.showSymbol
)
</script>
